<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<script>
    window.res_applyCount=0;
    window.parent_json=null;
    window.parent_json_2=null;
    window.res_labCode=null;
    window.res_week=null;
    window.res_interval=null;
    window.res_reason=null;
</script>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <% String path = request.getContextPath();%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css">
    <script src="<%=path%>/layui/layui.js" type="text/javascript"></script>
    <script src="<%=path%>/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body onload="init();">
<div class="layui-container">
    <div class="layui-row">
        <form class="layui-form" style="margin-top: 8%;">
            <div class="layui-form-item">
                <label class="layui-form-label">实验室名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="labName" disabled="disabled" placeholder="实验室名称" class="layui-input" id="input_labName">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预约时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="labWeek" disabled="disabled" placeholder="预约时间" class="layui-input" id="input_week">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预约时段</label>
                <div class="layui-input-inline">
                    <input type="text" name="labTime" disabled="disabled" placeholder="预约时段" class="layui-input" id="input_interval">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">申请人数</label>
                <div class="layui-input-inline">
                    <input type="text" name="labNum" oninput="if(value<1)value=1;value=value.replace(/[^\d]/g,'')" placeholder="申请人数" class="layui-input" required lay-verify="required" onkeyup="test();" id="input_applyCount">
                </div>
                <div style="color: red; font-size: larger;">*</div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">申请理由</label>
                <div class="layui-input-block">
            <textarea name="labRes" placeholder="请输入申请理由(50字以内)：" class="layui-textarea" maxlength="50"
                      style="resize: none;" id="input_reason"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 6%;  margin-left: 13%;">
                <div class="layui-input-block">
                    <button id="btn0" class="layui-btn layui-btn-normal" onclick="due();return false;"lay-filter="due1">预约</button>
                    <button id="btn1" class="layui-btn layui-btn-primary " onclick="cancel1()">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="<%=path%>/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<%--数据持久化--%>
<script>
    function due() {
        var index = parent.layer.getFrameIndex(window.name);
        if (res_applyCount === 0){
            layer.tips('请输入正确的人数', '#input_applyCount', {
                tips: [2, '#009688'],
                time: 2000
            });
        }else {
            res_reason=$('#input_reason').val();
            $.ajax({
               type:"POST"
               ,url:"${pageContext.request.contextPath}/jsp/apply.do?method=apply&labCode="
                    +res_labCode+"&applyCount="+res_applyCount+"&reason="+res_reason+"&week="+res_week+"&interval="+res_interval
                ,dataType:"json"
                ,success:function (data) {
                   if (data.ok === "yes"){
                       layer.msg('已提交预约！😀',{time:1500},function () {
                           parent.render();
                           parent.render2()
                           parent.layer.close(index);
                       });

                   }
                }
                ,error:function () {
                    layer.msg('哎~提交预约失败了，请稍后再试😔');
                }
            });
        }
    }
    function cancel1() {
        var index1 = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index1);
    }
</script>
<script type="text/javascript">
    function init() {
        $(function () {
            parent_json = eval('('+parent.json+')');
            parent_json_2 = eval('('+parent.json_2+')');
            let local = parent.local;
            if (local === 0){
                $('#input_interval').val(parent_json.interval);
                $('#input_labName').val(parent.select_labName);
                $('#input_week').val(parent.select_week_text);
            }else if (local === 1){
                $('#input_interval').val(parent.select_interval_2_text);
                $('#input_labName').val(parent_json_2.lib);
                $('#input_week').val(parent.select_week_2_text);
            }
        });
    }
    window.onload=init;
</script>
<%--申请人数输入验证--%>
<script type="text/javascript">
    function test() {
        res_labCode=null;
        res_week=null;
        res_interval=null;
        if (parent.local === 0) {
            res_labCode=parent.select_labCode;
            res_week=parent.select_week;
            res_interval=trans(parent_json.interval);

            let applyCount = $('#input_applyCount').val();
            if (applyCount > 100) {/*目前为了减小服务器的压力，暂定人数超过100时直接前端拦截*/
                layer.tips('人数超标啦！请减少人数', '#input_applyCount', {tips: [1, '#009688'], time: 2000});
                res_applyCount=0;
            } else {
                $.ajax({
                    type: "POST"
                    ,
                    url: '${pageContext.request.contextPath}/jsp/user.do?method=getCapacity&labCode=' + res_labCode + "&week=" + res_week + "&interval=" + res_interval
                    ,
                    dataType: "json"
                    ,
                    success: function (data) {
                        if (applyCount <= data.labCapacity) {
                            res_applyCount = applyCount;
                        }else if (data.labCapacity == 0){
                            layer.msg('你所选的实验室,本时段已经没有余量了哦！');
                        } else {
                            layer.tips('所选实验室当前时段余量不足' + '(剩余：' + data.labCapacity + '/' + data.labTotal + '人)' + '，请减少人数', '#input_applyCount', {
                                tips: [1, '#009688'],
                                time: 2000
                            });
                        }
                    }
                });
            }
        }else if (parent.local === 1){
            /*转换labName为labCode*/
            let flag=false;
            myajax=$.ajax({
                type:"POST"
                ,url:"${pageContext.request.contextPath}/jsp/root.do?method=getLabCodeByLabName&labName="+parent_json_2.lib
                ,dataType: "json"
                ,success:function (data) {
                    res_labCode=data.labCode;
                    flag=true;
                }
                ,error:function () {
                    res_labCode=null;
                    flag=true;
                }
            });
            res_week=parent.select_week_2;
            res_interval=parent.select_interval_2;
            $.when(myajax).done(function () {
                if (flag) {
                    let applyCount = $('#input_applyCount').val();
                    if (applyCount > 100) {/*目前为了减小服务器的压力，暂定人数超过100时直接前端拦截*/
                        layer.tips('人数超标啦！请减少人数', '#input_applyCount', {tips: [1, '#009688'], time: 2000});
                        res_applyCount=0;
                    } else {
                        $.ajax({
                            type: "POST",
                            url: '${pageContext.request.contextPath}/jsp/user.do?method=getCapacity&labCode=' + res_labCode + "&week=" + res_week + "&interval=" + res_interval,
                            dataType: "json"
                            ,success: function (data) {
                                if (applyCount <= data.labCapacity) {
                                    res_applyCount = applyCount;
                                }else if (data.labCapacity == 0){
                                    layer.msg('你所选的实验室,本时段已经没有余量了哦！');
                                } else {
                                    layer.tips('所选实验室当前时段余量不足' + '(剩余：' + data.labCapacity + '/' + data.labTotal + '人)' + '，请减少人数', '#input_applyCount', {
                                        tips: [1, '#009688'],
                                        time: 2000
                                    });
                                }
                            }
                        });
                    }
                }
            })
        }
    }
</script>
<%--interval_text转interval--%>
<script type="text/javascript">
    function trans(interval_text) {
        switch (interval_text) {
            case "1-2":return "one";
            case "3-4":return "two";
            case "5-6":return "three";
            case "7-8":return "four";
            case "9-10":return "five";
        }
    }
</script>
</body>

</html>